<template>
  <div class="subTask">
    <el-container>
      <el-header>
        <Head></Head>
      </el-header>
      <!-- 轮播图部分 -->
      <img  height="450px" src="../assets/subtask.png" alt="">
      <h1 align="center">发布任务</h1>

      <!-- 提交订单部分 -->
      <el-row type="flex" class="row-bg" justify="space-between" style="text-align:center">
        <!-- 文件上传 -->
        <el-col  :offset="4" :span="2"><div class="grid-content bg-purple">
          <p>文件</p>
          <el-button type="primary" size="small">点击上传</el-button>
        </div></el-col>
        <!-- 输入名称 -->
        <el-col :span="2"><div class="grid-content bg-purple">
          <p>名称</p>
          <input type="text" placeholder="请输入内容">
        </div></el-col>
        <!-- 文件类型 -->
        <el-col :span="2"><div class="grid-content bg-purple">
          <p>文件类型</p>
          
          
        </div></el-col>
         <!-- 材质-->
        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
         <!--品牌 -->
        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
         <!-- 牙齿单价 -->
        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
         <!-- 牙齿数量 -->
        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
         <!-- 备注消息-->
        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>

        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>

      <hr>

      <!-- 当前总计 -->
      <el-row>
        <el-col :offset="4" :span="16"><div class="grid-content bg-purple-dark">
          <p>当前总计</p>
          <div class="num-price">
            <p>牙齿数量：<span>1颗</span> </p>
            <p>牙齿单价：<span>￥128.00</span></p>
            <p>当前总价：<span>￥128.00</span></p> 
          </div>
        </div></el-col>
      </el-row>

      <!-- 支付方式 -->
      <el-row>
        <el-col :offset="4" :span="16"><div class="grid-content bg-purple-dark">
          <p>支付方式</p>
          <div class="pay-methods">
            <div class="methods">
              <div >
                <el-checkbox >&nbsp;&nbsp;使用<span>10</span>张卡卷抵扣(当前账户可用卡卷：<span>100张</span> )</el-checkbox>
              </div>
              <div>
                 <el-checkbox >&nbsp;&nbsp;在线线下支付</el-checkbox>
              </div>      
            </div>
          </div>
        </div></el-col>
      </el-row>

      <!--提交订单 -->
      <el-row type="flex" class="row-bg btn-submit" justify="center" >
        <el-col :span="16"><div class="grid-content bg-purple" align="center">
          <router-link tag="div" to="/taskPut">
            <el-button type="primary">提交任务</el-button>
          </router-link>
        </div></el-col>
      </el-row>
      <!-- 底部部分 -->
      <el-footer>
        <Foot></Foot>
      </el-footer>
      <!-- 底部部分 -->
    </el-container>
  </div>
</template>

<script>
import Head from "@/components/Head.vue"
import Foot from "@/components/Foot.vue"
export default {
  components:{
    Head,
    Foot
  },
   data() {
      return {

      }
    },
    methods: {
     
    }
}
</script>

<style lang="less" scoped>
.num-price,.pay-methods{
  padding-left:30px; 
  border-bottom:1px #82A8D3 dashed; 
  margin: 20px 0;
}

.pay-methods{
  border-bottom:1px #82A8D3 solid;
}
 
 .pay-methods .methods:last-child{
   margin-bottom: 20px;
 }

.num-price span, .pay-method span{
  color: #82A8D3;
}
.btn-submit{
  padding: 20px 0 40px;
  border-bottom: solid 1px #F9F9F9;
  margin-bottom:20px; 
}
</style>
